<style>
</style>
<template>
  <div>
    <Card ref="card">
      <p slot="title">评估报告</p>
      <a href="#" slot="extra" @click.prevent="refData">刷新</a>
      <Row :gutter="16">
        <Col span="6">
          <Input v-model="str" size="large" placeholder="请输入项目名称"/>
        </Col>

        <Col span="4">
          <Button @click="SearchAll" size="large" type="primary" icon="ios-search">查询</Button>
        </Col>
      </Row>
    </Card>
    <Row class="margin-top-10" :gutter="8">
      <Col span="4">
        <Menu theme="light" width="auto">
          <Submenu 
            v-for="(item, index) in yearList"
            :key="`menu_${index}`"
            :name="item.Year"          
          >
            <template slot="title" >
             
              <Icon type="ios-folder-open"/>
            {{item.Year}}
              
            </template>
            <MenuItem
              v-for="(jtem, index2) in item.Area"
              :key="`menu_item_${index2}`"
              :name="(jtem.YearName+jtem.AreaName)"
              @click.native="SearchByArea(jtem)"
            >{{jtem.AreaName}}</MenuItem>
          </Submenu>
        </Menu>
      </Col>
      <Col span="20">
        <Row>
          <Table border :columns="tableTitle" :data="tableData" ref="table" :height="tableHeight"></Table>
        </Row>
        <Row class="margin-top-10">
          <Page
            :total="total"
            :current="pPage"
            :page-size="pSize"
            :page-size-opts="[50,100,300,500,1000,2000,5000]"
            @on-change="s=>{pPage=s;Search();}"
            @on-page-size-change="p=>{pSize=p;pPage=1;Search()}"
            show-total
            show-sizer
          />
        </Row>
      </Col>
    </Row>
  </div>
</template>
<script>
import dayjs from "dayjs";
import { Message, Modal } from "view-design";
import { SearchPersonGrouphasPage, GetAreaYear,CancelSavedPersonGroup } from "@/api/data";
export default {
  name: "search_person_saved",
  data() {
    return {
      yearList: [],
      total: 0,
      pPage: 1,
      pSize: 50,
      splitHeight: 500,
      tableHeight: 450,
      str: "",
      year: "",
      area: "",
      tableTitle: [
        {
          title: "序号",
          key: "R_INDEX",
          align: "center",
          width: 80
        },
         
        {
          title: "项目名称",
          key: "GroupName",
          render: (h, params) => {
            return h(
              "a",
              {
                props: {
                  href: "#"
                },
                style: {
                  fontSize: "18px"
                },
                on: {
                  click: () => {
                    this.turntodetail(params.row);
                  }
                }
              },
              params.row.GroupName
            );
          }
        },
        {
          title: "实施日期",
          key: "sys_CreateDate",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              dayjs(params.row.sys_CreateDate).format("YYYY年MM月DD日")
            );
          }
        }
      ],
      tableData: []
    };
  },

  methods: {
    refData() {
      this.GetAreaYear();
      this.SearchAll();
    },
    GetAreaYear() {
      let vm = this;
      GetAreaYear().then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.yearList = data.Data;
        } else {
          vm.$Message.error(data.Message);
        }
      });
    },
    
    SearchByArea(item) {     
      this.year=item.YearName;
      this.area=item.AreaName;
      this.Search();
    },
    SearchAll(item) {     
      this.year='';
      this.area='';
      this.Search();
    },
    Search() {
      let vm = this;
      var reqData = {
        str: vm.str,
        year: vm.year,
        area: vm.area,
        issaved: 1,
        page: vm.pPage,
        size: vm.pSize
      };
      SearchPersonGrouphasPage(reqData).then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.total = data.Data.Total;
          vm.tableData = data.Data.Rows;
        } else {
          vm.$Message.error(data.Message);
        }
      });
    },
    turntodetail(item) {
      this.$router.push({
        name: "search_savedperson",
        params: { id: item.Gid },
        query: { groupname: item.GroupName }
      });
    },
    CancelSavedPersonGroup(id) {
      this.$Modal.confirm({
        title: "提示",
        content: "确定要取消归档此项目吗？",
        onOk: () => {
          CancelSavedPersonGroup(id).then((res) => {
            const data = res.data;
            if (data.Type == 1) {
              this.Search();
              this.$Modal.success({ title: "提示", content: "操作成功" });
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
          });
        },
        onCancel: () => {},
      });
    },
  },
  computed: {
    userinfo() { 
      return this.$store.state.user.userinfo;
    }
  },
  created() {},
  mounted() {
    var cardHeight = this.$refs.card.$el.offsetHeight;
    this.splitHeight = window.innerHeight - cardHeight - 100;
    this.tableHeight = window.innerHeight - cardHeight - 200;
    this.GetAreaYear();
    this.Search();
    if (this.userinfo.Auth){
      this.tableTitle=[
        {
          title: "序号",
          key: "R_INDEX",
          align: "center",
          width: 80
        },
        {
          title: "操作",
          key: "action",
          width: 100,
          align: "center",
          render: (h, params) => {
            return h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.CancelSavedPersonGroup(params.row.Gid)
                    }
                  }
                },
                "取消归档"
              );
          }
        },
        {
          title: "项目名称",
          key: "GroupName",
          render: (h, params) => {
            return h(
              "a",
              {
                props: {
                  href: "#"
                },
                style: {
                  fontSize: "18px"
                },
                on: {
                  click: () => {
                    this.turntodetail(params.row);
                  }
                }
              },
              params.row.GroupName
            );
          }
        },
        {
          title: "实施日期",
          key: "sys_CreateDate",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              dayjs(params.row.sys_CreateDate).format("YYYY年MM月DD日")
            );
          }
        }
      ]
    }
  }
};
</script>
